<template>
	<view>
		<view class="top">
			
		</view>
		<view class="bottom">
			
			<!-- 内容 -->
			<view class="content">
				<view class="step">
					<view class="step-item active">
						<view class="step-circle">
							<text class="step-text">预约</text>
							<text class="step-text">服务</text>
						</view>
					</view>
					<view class="step-line"></view>
					<view class="step-item">
						<view class="step-circle">
							<text class="step-text">支付</text>
							<text class="step-text">订单</text>
						</view>
					</view>
					<view class="step-line"></view>
					<view class="step-item">
						<view class="step-circle">
							<text class="step-text">门店</text>
							<text class="step-text">服务</text>
						</view>
					</view>
				</view>
				
				<view class="user-info">
					<uni-list-item title="伟业汽车美容店" note="山阳区人民中路33号" 
						thumb="/static/店铺.png"
						thumb-size="base"  />
					<uni-list-item title="张先生"  rightText="18686894566"
						thumb="/static/用户.png"
						thumb-size="base" clickable @click="call" />
					<uni-list-item :title="appointmentText" showArrow
						thumb="/static/预约表单.png"
						thumb-size="base"  clickable @click="appoint('center')"/>
					<uni-list-item :title="vehicleText" showArrow
						thumb="/static/汽车.png"
						thumb-size="base" clickable @click="chooseVehicle" />
				</view>
				
				<view class="service-product">
					<view class="product-title">
						<view class="title-name">
							服务产品
						</view>
						
						<view class="product-num">
							共选择<text>2项</text>服务产品
						</view>
					</view>
					<view class="product-item">
						<uni-list-item title="小保养套餐1（合成机油+机滤）" :border="false"/>
						<view class="price">
							￥{{productPrices[0]}}
						</view>
					</view>
					<view class="product-item">
						<uni-list-item title="小保养套餐1（合成机油+机滤）" :border="false"/>
						<view class="price">
							￥{{productPrices[1]}}
						</view>
					</view>
				</view>
				
				<view class="coupon">
					<uni-list-item title="代金券/优惠券" showArrow
						thumb="/static/代金券.png" :rightText="`-${discount}元`" 
						thumb-size="sm" />
				</view>
				
				

			</view>
			
				<!-- 提交订单 -->
			<view class="submitorder">
				<view class="submit-content">
					<view class="contact-service" @click="contactService">
						<image src="/static/客服.png" mode="aspectFit" class="service-icon"/>
						<text class="service-text">联系客服</text>
					</view>
					<view class="total-price">
						<text class="total-label">合计: </text>
						<text class="total-amount">¥{{totalPrice}}</text>
					</view>
					<view class="submit-btn" @click="onSubmit">
						提交订单
					</view>
				</view>
			</view>
			
			<!-- 预约弹窗 -->
			<view>
				<!-- 中心卡片式预约弹窗 -->
				<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0.5)" @change="change">
					<view class="appointment-card">
						<!-- 弹窗头部 -->
						<view class="card-header">
							<view class="header-title">选择预约时间</view>
							<view class="close-btn" @click="cancelSelect">×</view>
						</view>
						
						<!-- 日期选择器容器 -->
						<view class="card-content">
							<view class="date-section">
								<view class="section-title">选择日期</view>
								<view class="date-picker-container">
									<picker mode="date" 
										:value="currentDateStr" 
										:start="minDateStr" 
										:end="maxDateStr"
										@change="onDateChange">
										<view class="date-display">
											<text class="date-text">{{currentDateStr}}</text>
											<text class="date-arrow">></text>
										</view>
									</picker>
								</view>
							</view>
							
							<view class="time-section">
								<view class="section-title">选择时间</view>
								<view class="time-slots">
									<view 
										v-for="(time, index) in timeSlots" 
										:key="index"
										class="time-slot"
										:class="{ 'active': selectedTime === time }"
										@click="selectTime(time)"
									>
										{{ time }}
									</view>
								</view>
							</view>
						</view>
						
						<!-- 底部按钮 -->
						<view class="card-footer">
							<view class="footer-btn cancel-btn" @click="cancelSelect">取消</view>
							<view class="footer-btn confirm-btn" @click="confirmSelect">确认预约</view>
						</view>
					</view>
				</uni-popup>
			</view>
			
			<!-- 支付密码弹窗 -->
			<uni-popup ref="payPopup" type="center" background-color="rgba(0,0,0,0.5)">
				<view class="pay-popup" :class="{ 'keyboard-active': showKeyboard }">
					<!-- 关闭按钮 -->
					<view class="close-btn" @click="closePayPopup">×</view>
					
					<!-- 标题 -->
					<view class="pay-title">请输入支付密码</view>
					
					<!-- 服务平台 -->
					<view class="service-platform">车辆服务平台</view>
					
					<!-- 金额 -->
					<view class="pay-amount">¥ 39.90</view>
					
					<!-- 支付方式 -->
					<view class="pay-method">
						<text class="method-label">支付方式</text>
						<text class="method-value">零钱 ></text>
					</view>
					
					<!-- 密码输入框 -->
					<view class="password-container">
						<van-password-input
						  :value="password"
						  :length="6"
						  :focused="showKeyboard"
						  @focus="showKeyboard = true"
						/>
					</view>
					
					<!-- 确定支付按钮 -->
					<view class="pay-confirm-btn" @click="confirmPayment">
						确定支付
					</view>
				</view>
			</uni-popup>
			
			<!-- 数字键盘 -->
			<van-number-keyboard
			  :show="showKeyboard"
			  @blur="showKeyboard = false"
			  @input="onInput"
			  @delete="onDelete"
			/>

		</view>
		
		
		<!-- 拨打电话 -->
			<!-- 预约弹窗 -->
			<view>
			<!-- 拨打电话 -->
			<uni-popup ref="call" type="bottom" background-color="transparent" @change="change">
				<view class="call-popup">
					<!-- 电话号码显示 -->
					<view class="phone-number">
						18642589456
					</view>
					
					<!-- 操作按钮 -->
					<view class="call-actions">
					<view class="action-btn call-btn" @click="makeCall">
							拨打
						</view>
						<view class="action-btn copy-btn" @click="copyPhone">
							复制
						</view>
						<view class="action-btn cancel-btn" @click="cancelCall">
							取消拨号
						</view>
					</view>
				</view>
			</uni-popup>
			</view>
		
	</view>
</template>

<script>
	export default {
		components: {
			// uni-popup 组件会自动注册
		},
		data() {
			return {
				type: 'center',
				minDate:new Date(),
				maxDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000), // 今天往后15天
				currentDate: new Date(), // 默认选中今天
				showKeyboard: false,
				password: '',
				// 价格相关数据
				productPrices: [39.9, 49.9], // 产品价格
				discount: 10, // 优惠金额
				totalPrice: 79.8, // 总价
				// 预约相关数据
				selectedTime: '', // 选中的时间
				selectedDate: '', // 选中的日期
				currentDateStr: '', // 当前选中的日期字符串
				minDateStr: '', // 最小日期字符串
				maxDateStr: '', // 最大日期字符串
				// 车辆相关数据
				selectedVehicle: {
					brand: '奔驰',
					model: 'E300',
					plateNumber: '沪AZR666'
				}, // 选中的车辆信息
				timeSlots: [
					'09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
					'14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
					'17:00', '17:30', '18:00', '18:30'
				] // 可选时间段
			}
		},
		computed: {
			// 计算总价
			calculatedTotal() {
				const subtotal = this.productPrices.reduce((sum, price) => sum + price, 0);
				return (subtotal - this.discount).toFixed(1);
			},
			// 预约显示文本
			appointmentText() {
				if (this.selectedDate && this.selectedTime) {
					return `${this.selectedDate} ${this.selectedTime}`;
				}
				return '立即预约';
			},
			// 车辆显示文本
			vehicleText() {
				if (this.selectedVehicle.brand && this.selectedVehicle.model && this.selectedVehicle.plateNumber) {
					return `${this.selectedVehicle.brand}${this.selectedVehicle.model}/${this.selectedVehicle.plateNumber}`;
				}
				return '选择车辆';
			}
		},
		watch: {
			// 监听价格变化，更新总价
			productPrices: {
				handler() {
					this.totalPrice = this.calculatedTotal;
				},
				deep: true
			},
			discount() {
				this.totalPrice = this.calculatedTotal;
			}
		},
		mounted() {
			// 初始化日期字符串
			this.initDateStrings();
		},
		onShow() {
			// 页面显示时检查是否有从车辆选择页面返回的数据
			this.checkVehicleSelection();
		},
		methods: {
			// 初始化日期字符串
			initDateStrings() {
				const today = new Date();
				const maxDate = new Date(Date.now() + 15 * 24 * 60 * 60 * 1000);
				
				this.currentDateStr = this.formatDate(today);
				this.minDateStr = this.formatDate(today);
				this.maxDateStr = this.formatDate(maxDate);
			},
			
			// 格式化日期为 YYYY-MM-DD 格式
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 日期选择变化
			onDateChange(e) {
				this.currentDateStr = e.detail.value;
				this.currentDate = new Date(e.detail.value);
			},
			appoint(type){
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				console.log("点击了预约");
			},
		
			// 取消选择
			cancelSelect() {
				this.$refs.popup.close()
			},
			
			// 确认选择
			confirmSelect() {
				if (!this.selectedTime) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					});
					return;
				}
				
				// 格式化选中的日期
				const date = new Date(this.currentDateStr);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				this.selectedDate = `${month}月${day}日`;
				
				console.log("选择的日期:", this.selectedDate);
				console.log("选择的时间:", this.selectedTime);
				
				this.$refs.popup.close()
				// 可以显示选择成功的提示
				uni.showToast({
					title: '预约时间已选择',
					icon: 'success'
				})
			},
			
			// 选择时间
			selectTime(time) {
				this.selectedTime = time;
			},
			
			formatter(type, value) {
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				return value;
			},
			
			/* 点击打电话 */
			call(type){
				this.type = 'bottom'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.call.open('bottom')
				console.log("拨打电话");
			},
			
			// 复制电话号码
			copyPhone() {
				const phoneNumber = '18642589456';
				uni.setClipboardData({
					data: phoneNumber,
					success: () => {
						uni.showToast({
							title: '电话号码已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 取消拨号
			cancelCall() {
				this.$refs.call.close();
			},
			makeCall(){
				console.log("拨打电话");
			},
			onSubmit(){
				// 打开支付密码弹窗
				this.password = '';
				this.$refs.payPopup.open('center');
			},
			onInput(key){
				if (this.password.length >= 6) return;
				this.password = (this.password + key).slice(0,6);
				if (this.password.length === 6) {
					this.showKeyboard = false;
				}
			},
			onDelete(){
				if (this.password.length > 0) {
					this.password = this.password.slice(0, -1);
				}
			},
			closePayPopup(){
				this.$refs.payPopup.close();
				this.showKeyboard = false;
			},
			confirmPayment(){
				if (this.password.length !== 6) {
					uni.showToast({ title: '请输入6位支付密码', icon: 'none' });
					return;
				}
				this.handlePayConfirm();
			},
			handlePayConfirm(){
				this.$refs.payPopup.close();
				this.showKeyboard = false;
				// TODO: 调用后端接口校验/支付
				uni.navigateTo({
					url: '/pages/maintenance/paysuccess/paysuccess',
				})
			},
			
			// 联系客服
			contactService() {
				uni.showToast({
					title: '联系客服功能',
					icon: 'none'
				});
			},
			
			// 选择车辆
			chooseVehicle() {
				uni.navigateTo({
					url: '/index-item/maintenance/chooseVehicle/chooseVehicle'
				});
			},
			
			// 检查车辆选择结果
			checkVehicleSelection() {
				// 从全局存储或页面参数中获取选择的车辆信息
				const selectedVehicle = uni.getStorageSync('selectedVehicle');
				if (selectedVehicle) {
					this.selectedVehicle = selectedVehicle;
					// 清除存储的车辆信息，避免影响其他页面
					uni.removeStorageSync('selectedVehicle');
				}
			},
			
		}
	}
</script>

<style scoped>
	.top{
		height: 25vh;
		background-color: #1f73f1;
	}
	.bottom{
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 75vh;
	}
	.content{
		background-color: #ffffff;
		border-radius: 25rpx;
		transform: translateY(-350rpx);
	}
	/* 步骤样式 */
	.step {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;
		padding: 40rpx;
	}
	
	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	
	.step-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #cccccc;
		position: relative;
		z-index: 2;
	}
	
	.step-text {
		font-size: 24rpx;
		color: white;
		font-weight: bold;
		line-height: 1.2;
	}
	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}
	/* 第一个步骤 - 预约服务 (蓝色) */
	.step-item:nth-child(1) .step-circle {
		background: linear-gradient(135deg, #4A90E2, #357ABD);
	}
	
	/* 第二个步骤 - 支付订单 (绿色) */
	.step-item:nth-child(3) .step-circle {
		background: linear-gradient(135deg, #50C878, #228B22);
	}
	
	/* 第三个步骤 - 门店服务 (橙色) */
	.step-item:nth-child(5) .step-circle {
		background: linear-gradient(135deg, #FF6B35, #E55100);
	}
	
	/* 连接线 */
	.step-line {
		flex: 1;
		height: 4rpx;
		background-color: #e0e0e0;
		margin: 0 20rpx;
		position: relative;
		z-index: 1;
	}
	
	/* 激活状态的连接线 */
	.step-item.active ~ .step-line {
		background-color: #4A90E2;
	}

	/* 底部提交订单样式 */
	.submitorder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top: 1rpx solid #e9e9eb;
		z-index: 999;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.submit-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}
	
	.contact-service {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		margin-right: 20rpx;
	}
	
	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.service-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.total-price {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.total-label {
		font-size: 28rpx;
		color: #333;
	}
	
	.total-amount {
		font-size: 32rpx;
		color: #FF6B35;
		font-weight: bold;
	}
	
	.submit-btn {
		background: linear-gradient(135deg, #1f73f1 0%, #4285f4 100%);
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(31, 115, 241, 0.3);
		transition: all 0.3s ease;
		flex: 0 0 auto;
	}
	
	.submit-btn:active {
		background: linear-gradient(135deg, #1a5cc7 0%, #3367d6 100%);
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(31, 115, 241, 0.4);
	}
	.product-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.price {
		color: #FF6B35;
		font-size: 32rpx;
		font-weight: bold;
	}
	.product-title{
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		margin-bottom: 25rpx;
	}
	.product-num text{
		color: #4A90E2;
	}
	.title-name{
		font-weight: bold;
		font-size: 35rpx;
		margin-left: 40rpx;
	}
	.user-info{
		border-bottom: 1rpx solid #e9e9eb;
		padding-bottom: 20rpx;
	}
	
	/* 预约卡片弹窗样式 */
	.appointment-card {
		background-color: #fff;
		border-radius: 20rpx;
		width: 650rpx;
		max-height: 80vh;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	}
	
	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}
	
	.card-header .header-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		text-align: center;
	}
	
	.card-header .close-btn {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 卡片内容 */
	.card-content {
		padding: 40rpx;
		max-height: 60vh;
		overflow-y: auto;
	}
	
	/* 日期选择区域 */
	.date-section {
		margin-bottom: 40rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.date-picker-container {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 2rpx solid #e0e0e0;
	}
	
	.date-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}
	
	.date-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
	
	.date-arrow {
		font-size: 28rpx;
		color: #999;
	}
	
	/* 时间选择区域 */
	.time-section {
		margin-bottom: 20rpx;
	}
	
	.time-slots {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.time-slot {
		padding: 20rpx 10rpx;
		text-align: center;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		font-size: 26rpx;
		color: #666;
		background-color: #f8f8f8;
		transition: all 0.3s ease;
	}
	
	.time-slot.active {
		border-color: #1f73f1;
		background-color: #1f73f1;
		color: #fff;
		transform: scale(1.05);
	}
	
	.time-slot:active {
		transform: scale(0.95);
	}
	
	/* 卡片底部 */
	.card-footer {
		display: flex;
		gap: 20rpx;
		padding: 30rpx 40rpx;
		background-color: #f8f8f8;
		border-top: 1rpx solid #e0e0e0;
	}
	
	.footer-btn {
		flex: 1;
		padding: 24rpx 0;
		text-align: center;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
	}
	
	.footer-btn.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.footer-btn.cancel-btn:active {
		background-color: #e8e8e8;
		transform: scale(0.95);
	}
	
	.footer-btn.confirm-btn {
		background: linear-gradient(135deg, #1f73f1 0%, #4285f4 100%);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(31, 115, 241, 0.3);
	}
	
	.footer-btn.confirm-btn:active {
		background: linear-gradient(135deg, #1a5cc7 0%, #3367d6 100%);
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(31, 115, 241, 0.4);
	}
	
	.coupon{
		margin-top: 25rpx;
	}
	::v-deep .uni-list-item__content-title{
		font-size: 30rpx;
	}
	::v-deep .uni-list-item__extra-text{
		font-size: 28rpx;
	}
	
	/* 拨打电话弹窗样式 */
	.call-popup {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 60rpx 40rpx 40rpx 40rpx;
		text-align: center;
		box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.1);
	}
	
	.phone-number {
		font-size: 48rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 60rpx;
		letter-spacing: 2rpx;
	}
	
	.call-actions {
		display: flex;
		gap: 30rpx;
	}
	
	.action-btn {
		flex: 1;
		padding: 32rpx 0;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		transition: all 0.3s ease;
	}
	
	.copy-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.copy-btn:active {
		background-color: #e8e8e8;
		transform: scale(0.95);
	}
	
	.cancel-btn {
		background-color: #1f73f1;
		color: #fff;
	}
	
	.cancel-btn:active {
		background-color: #1a5cc7;
		transform: scale(0.95);
	}
	.call-actions {
		display: flex;
		gap: 20rpx;
	}
	
	.action-btn {
		flex: 1;
		padding: 32rpx 0;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		transition: all 0.3s ease;
	}
	
	.call-btn {
		background-color: #34a853;
		color: #fff;
	}
	
	.call-btn:active {
		background-color: #2d8f47;
		transform: scale(0.95);
	}
	
	.copy-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.copy-btn:active {
		background-color: #e8e8e8;
		transform: scale(0.95);
	}
	
	.cancel-btn {
		background-color: #1f73f1;
		color: #fff;
	}
	
	.cancel-btn:active {
		background-color: #1a5cc7;
		transform: scale(0.95);
	}

	/* 支付密码弹窗样式 */
	.pay-popup {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 600rpx;
		position: relative;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
	}
	
	/* 键盘激活时弹窗上移 */
	.pay-popup.keyboard-active {
		transform: translateY(-200rpx);
	}
	
	.close-btn {
		position: absolute;
		top: 20rpx;
		left: 30rpx;
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.pay-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin-bottom: 20rpx;
	}
	
	.service-platform {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.pay-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.pay-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 40rpx;
	}
	
	.method-label {
		font-size: 28rpx;
		color: #333;
	}
	
	.method-value {
		font-size: 28rpx;
		color: #666;
	}
	
	.password-container {
		padding: 20rpx 0;
	}
	
	.pay-confirm-btn {
		background-color: #1f73f1;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 12rpx;
		margin-top: 30rpx;
		transition: all 0.3s ease;
	}
	
	.pay-confirm-btn:active {
		background-color: #1a5cc7;
		transform: scale(0.98);
	}
</style>